<!-- 子组件 child.vue -->
<template>
  <div>
    <!-- 使用传过来的父组件参数 -->
    <p>{{ message }}</p>
  </div>
</template>
<script lang="ts" setup>
// defineProps 创建组件接收的参数
// withDefaults 设置对象的默认值
// defineEmits 创建父组件可以监听的事件

// 此处创建两个事件update和over
const emit = defineEmits(["update", "over"]);

// 声明一个方法来表示我什么时候触发事件
const sendMsg = () => {
  // 表示当前函数被调用的时候触发update事件，并在第二个参数传入所需值
  // data可以是任意值
  emit("update", {});
};
// 使用interface定义一个类型，并描述数据模样。
interface PropsOption {
  message: string;
  // ?是表明该参数可传
  list?: Array<string>;
  // 表示该对象的key可以是任何数据类型，value可以是任何数据类型
  [key: string]: any;
}

// 声明子组件要接受的参数，不设置默认值
// const props = defineProps<PropsOption>();

// 声明子组件要接受的参数，设置默认值
const props = withDefaults(defineProps<PropsOption>(), {
  message: "Hello from parent",
});
</script>
